<template>
  设置列表属性，基于el-table二次开发，可以通过拖拽表头（th）实现调整顺序、移除、对齐等操作<br>
  支持快捷键翻页 —— 数字键：到页号；方向键（支持wasd）：上一页、下一页、首页、末页；Home：首页；End：末页
  <hr>
  <el-button @click="setMeta">设置列表属性</el-button><br>
  <div
    v-grid-drag="gridMeta"
  >
    <nf-grid
      v-grid-drag="gridMeta"
      :dataList="dataList"
      v-bind="gridMeta"
      :selection="selection"
    >
    </nf-grid>
  </div>
  <el-pagination
    background
    layout="prev, pager, next"
    v-model:currentPage="pagerInfo.index"
    :total="pagerInfo.total"
  >
  </el-pagination>
  
  <help-grid
    :drawerInfo="drawerInfo"
    :meta="gridMeta"
    :formDom="formDom"
  >
  </help-grid>
</template>

<script>
  import { reactive, nextTick, watch, ref, defineAsyncComponent } from 'vue'
  import { ElButton, ElPagination, ElInput } from 'element-plus'
  import { createDataList, mykeypager, lifecycle } from '/nf-ui-core'
  import { helpGrid } from '/nf-meta-help'
  import _gridMeta from './grid.json'
  import _formMeta from '../form/form.json'

</script>

<script setup>
  lifecycle('列表控件', true)

  const selection = reactive({
    dataId: '', // 单选ID number 、string
    row: {}, // 单选的数据对象 {}
    dataIds: [], // 多选ID []
    rows: [] // 多选的数据对象 []
  })

  // 获取表单控件需要的meta
  const gridMeta = reactive(_gridMeta)
  
  const pagerInfo = reactive({
    size: 10, // 一页记录数
    total: 200, // 总数
    count: 20, // 页数
    index: 1 // 当前页号
  })
  
  // 根据 meta 创建表单的 model
  const _dataList = createDataList(_formMeta.itemMeta, pagerInfo.total).reverse()

  const dataList = reactive([])

  watch(() => pagerInfo.index, (index) => {
    console.log(index)
    dataList.length = 0
    const cpp = (pagerInfo.index - 1) * pagerInfo.size
    for(let i=0; i< pagerInfo.size; i++) {
      dataList.push(_dataList[cpp + i])
    }
  }, {immediate:true})

  // 按键翻页
  mykeypager(pagerInfo)

  // ============================
  const formDom = ref(null)
  
  // 控制 表单 抽屉的展开收拢
  const drawerInfo = reactive({
    isShow: false,
    isLoad: false
  })

  const setMeta = () => {
    drawerInfo.isShow = true
    drawerInfo.isLoad = true
  }

</script>